$(function () {

  // 定义常量q查询参数对象
  const q = {
    // 页码值
    pagenum: 1,
    // 每页展示的数据条数
    pagesize: 4,
    // 删选条件：文章的分类
    cate_id: '',
    // 删选条件、；文章的状态
    state:''
  }

  // 封装获取文章列表函数
  function initArtList() {
    axios.get('/my/article/list', {
      params: q
    }).then(({data:res} ) => {
      // console.log(res.data);
      
      if (res.code === 0) {
        // 定义一个空数组
        const rows = []
        // 遍历数组取值
        res.data.forEach(item => {
          rows.push(`
          <tr>
              <td><a href="javascript:;" style="color:skyblue" class="show-d" data-id="${item.id}">${item.title}</a></td>
              <td>${item.cate_name}</td>
              <td>${dayjs(item.pub_date).format('YYYY-MM-DD HH:mm:ss')}</td>
              <td>${item.state}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id='${item.id}'>删除</button>
              </td>
            </tr>
          `)
        })
        // 添加到指定tbody
        $('tbody').html(rows)

        renderPage(res.total)
      }
    })
  }
  // 调用函数
  initArtList()

  // 封装获取文章分类的函数
  function initCateList() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      if (res.code === 0) {
        const rows = []
        res.data.forEach(item => {
          rows.push(`
          <option value="${item.id}">${item.cate_name}</option>
          `)
        })
        $('[name="cate_id"]').append(rows)
        // 重新渲染下拉菜单
        layui.form.render('select')
      }
    })
  }

  // 调用封装文章分类函数
  initCateList()


  // 监听表单的submit事件
  $('.layui-form-pane').on('submit', function (e) {
    // 阻止form默认行为
    e.preventDefault()

    // 根据用户指定的筛选条件，重新发起第一页请求
    // 1·把用户勾选的分类id 储存到q.cate_id中
    q.cate_id=$('[name="cate_id"]').val()
    // 2·把用户勾选的发布状态 储存到q.state中
    q.state=$('[name="state"]').val()
    // 3·把页码值充值为1
    q.pagenum = 1

    // 调用文章列表函数
    initArtList()
  })

  // 监听重置按钮的点击事件
  $('[type="reset"]').on('click', function () {

    // 清空所有的删选条件
    q.cate_id = ''
    q.state = ''
    q.pagenum = 1

    // 调用文章列表函数
    initArtList()
  })

  // 封装渲染分页的效果
  function renderPage(total){
    layui.laypage.render({
      elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, //显示分类的数据
      curr: q.pagenum, //指定那个页码值被高亮
      // 自定义分页的布局
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      // 自定义分页可选择的条目数
      limits:[5, 10, 15, 20, 25],
      jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        q.pagenum=obj.curr
        // console.log(obj.limit); //得到每页显示的条数
        // curr=obj.limit跟elem平级   
        q.pagesize=obj.limit


        //首次不执行
        if(!first){
          //do something
          // 调用获取文章列表的函数
          initArtList()
        }
      }
    })
  }


  // 事件委托 点击删除按钮删除数据
  $('tbody').on('click', '.btn-delete', function () {
    const id = $(this).attr('data-id')
    console.log(id);

    // 询问是否确定删除  layui中的询问方法
    layer.confirm('确定删除此文章吗?', {icon: 3, title:'提示'}, function(index){
      //do something
      axios.delete('/my/article/info', {
        params:{id}
      }).then(({ data: res }) => {
        if (res.code === 0) {
          // 提示弹出层
          layer.msg(res.message)

          // 优化删除功能 防止出现空白页面
          if (q.pagenum > 1 && $('tbody tr').length === 1) {
            q.pagenum--
          }

          // 调用文章列表封装函数  重新刷新文章列表
          initArtList()
        }
      })
      layer.close(index);
    })
  })

  // 事件委托 点击a 链接获取文章详情
  $('tbody').on('click', '.show-d', function () {
    const id = $(this).attr('data-id')
    console.log(id);

    // 1·发送axios请求 
    axios.get('/my/article/info', {
      params:{id}
    }).then(({ data: res }) => {
      if (res.code === 0) {
        // 2·在弹出层显示
        console.log(res);
        layer.open({
          type:1,
          area:['85%','85%'],
          title: '在线调试',
          content: `<div class="artinfo-box">
          <h1 class="artinfo-title">${res.data.title}</h1>
          <div class="artinfo-bar">
            <span>作者：${res.data.nickname||res.username}</span>
            <span>发布时间：${dayjs(res.data.pub_date).format('YYYY-MM-DD HH:mm:ss')}</span>
            <span>所属分类：${res.data.cate_name}</span>
            <span>状态：${res.data.state}</span>
          </div>
          <hr>
          <img src="http://www.liulongbin.top:3008${res.data.cover_img}" alt="" class="artinfo-cover">
          <div>${res.data.content}</div>
          </div>`
        })
      }
    })
    
  })
})